<template>
  <div class="role-define">
    <q-card class="card full-height" flat>
      <div class="toolbar form-inline">
        <div class="left-side">
          <q-btn class="btn" outline color="primary" @click="onCreateClick">新增</q-btn>
        </div>

        <q-form class="right-side">
          <q-input
            class="quik-search"
            outlined dense
            v-model.trim="keyword"
            placeholder="请输入角色名称查询"
          >
            <template v-slot:prepend>
              <q-btn
                class="search-btn"
                type="submit"
                round
                flat
                icon="iconfont icontubiao-21"
                @click="listRoles"
              />
            </template>
            <template v-slot:append>
              <q-icon name="close" v-if="keyword.length > 0" @click="clearSearchVal()" class="cursor-pointer" />
            </template>
          </q-input>
        </q-form>
      </div>
      <q-table
          class="roles-table myTable scroll"
          :columns="tableColumns"
          :data="roles"
          row-key="id"
          :loading="isTableLoading"
          :pagination.sync="pagination"
          flat
          :hide-bottom="!!roles.length"
        >
        <template v-slot:body-cell-createTime="props">
          <q-td>
            {{ props.row.createTime | toTime }}
          </q-td>
        </template>
          <template v-slot:body-cell-operations="props">
            <q-td class="operations">
              <div class="btn-group">
                <table-btn btnType="edit" @click="onEditClick(props.row)" :disable="!props.row.customerFlag"/>
                <table-btn btnType="delete" @click="deleteRole(props.row.id)" :disable="!props.row.customerFlag" tips="确定要删除这条信息吗？"/>
              </div>
            </q-td>
          </template>
        </q-table>
        <yz-pagination v-model="pagination" @onSearch="listRoles()"/>
    </q-card>

    <role-detail
      :show="detailDialog.show"
      :role="detailDialog.detail"
      :for-create="detailDialog.forCreate"
      :for-edit="detailDialog.forEdit"
      @close="detailDialog.show = false"
      @submitted="onSubmitted"
    />
  </div>
</template>

<script>
import roleDefineApi from 'src/boot/system/role-define'
import RoleDetail from './components/role-detail'
import refreshMixin from '../../assets/js/refresh-mixin'
import _ from 'lodash'
export default {
  name: 'role-define',
  mixins: [refreshMixin],
  components: {
    RoleDetail
  },
  data () {
    return {
      pageName: 'role-define', // 页面name
      // 表格列标
      tableColumns: [
        { name: 'index', field: 'index', label: '序号', align: 'left' },
        { name: 'name', field: 'name', label: '角色名称', align: 'left' },
        { name: 'note', field: 'remarkStr', label: '备注', align: 'left' },
        { name: 'createName', field: 'createName', label: '创建人', align: 'left' },
        { name: 'createTime', field: 'createTime', label: '创建时间', align: 'left' },
        { name: 'operations', field: 'operations', label: '操作', align: 'center' }
      ],

      // 角色数组
      roles: [],

      // 搜索关键字
      keyword: '',

      // 表格正在加载
      isTableLoading: false,

      // 表格分页配置
      pagination: {
        pageNum: 1, // 当前页码
        pageSize: 15, // 每页条数
        rowsNumber: 0 // 总条数
      },

      // 工位详情 dialog 相关数据
      detailDialog: {
        // 显示 dialog
        show: false,
        // 用于创建
        forCreate: true,
        // 用于编辑
        forEdit: false,
        // 详情对象
        detail: {}
      }
    }
  },
  methods: {
    /**
     * 全局刷新数据
     * author: xueli
     */
    refreshInfo () {
      this.clearSearchVal()
    },
    // 清空搜索条件
    clearSearchVal () {
      this.keyword = ''
      this.listRoles()
    },
    /**
     * 列举角色，并插入到表格中
     */
    listRoles: function () {
      this.isTableLoading = true
      const params = {
        keyword: this.keyword ? this.keyword : null,
        ...this.pagination
      }
      roleDefineApi.listRolesPage(params)
        .then(data => {
          data.list.forEach((item, index) => {
            item.index = index + 1
            item.createName = this.$utils.label(item.createName)
            item.remarkStr = this.$utils.label(item.remark)
          })
          this.roles = data.list
          this.pagination.rowsNumber = data.total
        })
        .finally(() => {
          this.isTableLoading = false
        })
    },

    /**
     * 显示删除角色对话框
     * @param id 角色 ID
     */
    async promptDeleteRole (id) {
      this.$q.dialog({
        message: '<p class="dialog-notice-title"><i class="iconfont icontubiao-28" ></i> 确定要删除这条信息吗？</p>',
        html: true,
        ok: {
          unelevated: true,
          label: '确认'
        },
        cancel: {
          unelevated: true,
          outline: true,
          label: '取消'
        }
      })
        .onOk(() => {
          this.deleteRole(id)
        })
    },

    /**
     * 删除角色
     * @param id 角色 ID
     */
    async deleteRole (id) {
      const res = await roleDefineApi.roleCheck(id)
      const ret = res.map(v => v.userName)
      if (_.isEmpty(ret)) {
        roleDefineApi.deleteRole(id)
          .then(() => {
            this.listRoles()
            this.$message.success('删除成功')
          })
      } else {
        const tips = this.$utils.getNoneTips(ret, '该角色数据被占用，请解除后再删除')
        this.$utils.showDialog(tips)
      }
    },

    /**
     * on 编辑按钮被点击
     * @param role 角色对象
     */
    onEditClick: function (role) {
      Object.assign(this.detailDialog, { forCreate: false, forEdit: true })
      this.detailDialog.show = true
      this.detailDialog.detail = Object.assign({}, role)
    },

    /**
     * on 创建按钮被点击
     */
    onCreateClick: function () {
      Object.assign(this.detailDialog, { forCreate: true, forEdit: false })
      this.detailDialog.show = true
      this.detailDialog.detail = {}
    },

    onSubmitted: function () {
      this.detailDialog.show = false
      this.listRoles()
    }
  },
  created () {
    this.listRoles()
  }
}
</script>

<style scoped lang="stylus">
  .role-define .card {
    padding-top 10px
    display flex
    flex-direction column

    .toolbar {
      display flex
      justify-content space-between

      .left-side, .right-side {
        display flex
        align-items flex-start
      }

      .right-side {
        .quik-search {
          display inline-block

          .search-btn {
            min-width 32px
            width 32px
            height 32px
            margin-right -10px
          }
        }
      }
    }

    .roles-table {
      .operations {
        width 100px

        .btn-group {
          display flex
          justify-content center
        }
      }
    }
  }
</style>

<!--<style lang="stylus">-->
  <!--.role-define{-->
    <!--.myTable .q-table__middle{-->
      <!--max-height calc(100% - 200px)-->
    <!--}-->
  <!--}-->
<!--</style>-->
